<template>
    <div class="detail-wrap">
        <CommonHeader teleport=".header" title="">
            <template #left>
                <van-icon name="arrow-left" />
            </template>
            <template #right>
                <van-popover v-model:show="showPopover" :actions="actions" placement="bottom-end" theme="dark">
                    <template #reference>
                        <van-icon name="ellipsis" />
                    </template>
                </van-popover>
            </template>
        </CommonHeader>

        <van-skeleton :loading="!detailInfo">
            <!-- 模版 -->
            <template #template>
                <van-skeleton-image image-size="355" style="height:375px" />
            </template>
            <!-- 实际内容的default -->
            <template #default>
                <van-swipe class="banner" :loop="true" :autoplay="2000">
                    <template v-for="item, index in [detailInfo.img1, detailInfo.img2, detailInfo.img3, detailInfo.img4]"
                        :key="item">
                        <van-swipe-item>
                            <img :src="item" alt="">
                        </van-swipe-item>
                    </template>
                </van-swipe>
            </template>
        </van-skeleton>
        <van-text-ellipsis class="pro-title" :content="detailInfo?.proname" rows="2" expand-text="展开" collapse-text="收起" />

        <van-cell title="价格" :value="detailInfo && (detailInfo.originprice * detailInfo.discount / 10).toFixed(2)" />
        <van-cell title="分类" :value="detailInfo?.category" />
        <van-cell title="品牌" :value="detailInfo?.brand" />
        <van-cell title="销量" :value="detailInfo?.sales" />
        <van-cell title="购买">
            <template #value>
                <van-stepper v-model="cartParams.num" integer />
            </template>
        </van-cell>
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
            <van-action-bar-icon icon="cart-o" text="购物车" to="/cart" />
            <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
            <van-action-bar-button type="warning" text="加入购物车" @click="addToCartHandler" />
            <van-action-bar-button type="danger" text="立即购买" />
        </van-action-bar>
    </div>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia";
import { ref, reactive, computed, watchEffect } from "vue";
import {showFailToast, showSuccessToast} from "vant";
import { useRoute, useRouter } from "vue-router";
import { useAuthStore } from "@/stores/auth";

import { getDetailAPI } from "@/api/product"
import { addCartAPI } from "@/api/cart";

import CommonHeader from "@/components/CommonHeader.vue";

let route = useRoute();
let router = useRouter();
let AuthStore = useAuthStore();

let showPopover = ref<boolean>(false);
let detailParams = reactive(route.query);
let detailInfo = ref<any|null>(null);

const actions = [
    { text: '选项一', icon: 'add-o' },
    { text: '选项二', icon: 'music-o' },
    { text: '选项三', icon: 'more-o' },
];


let cartParams = reactive<AddCartRaw>({
    userid:AuthStore.auth.userid as unknown as string,
    proid: route.query.proid as unknown as string,
    num: 1,
});


let getDetail = async () => {
    try {
        let result = await getDetailAPI(detailParams);
        console.log("商品详情获取成功", result.data);

        detailInfo.value = result.data;
    } catch (err: any) {
        showFailToast(err.message);
    }
}

let addToCartHandler = async () =>{
    try {
        let result = await addCartAPI(cartParams);
        console.log("加入购物车成功", result.data);
        showSuccessToast("加入成功!");
    } catch (err: any) {
        showFailToast(err.message);
    }
}


watchEffect(() => {
    getDetail();
})








</script>

<style lang="scss" scoped>
.detail-wrap {
    padding-bottom: 50px;
}

.banner {
    width: 375px;
    height: 375px;

    img {
        width: 100%;
    }
}

.pro-title {
    font-size: 21px;
    line-height: 36px;
}
</style>